import { Text, View } from '@tarojs/components';
import "./processTitle.scss";

interface ProcessButtonProps {
  setShowTextContent: (action: string) => void;
  content: string;
  showTextContent: string;
}

export const ProcessTitle: React.FC<ProcessButtonProps> = (props) => {
  return (
    <View className="step-toggle-header">
      <Text className="steps-toggle-title">{props.content}</Text>
      <View className='toggle-button-group'>
        <View className={`card-toggle-button ${props.showTextContent === 'image' ? 'toggle-button-active' : ''}`} onClick={() => props.setShowTextContent('image')}>
          图片版
        </View>
        <View className={`card-toggle-button ${props.showTextContent === 'text' ? 'toggle-button-active' : ''}`} onClick={() => props.setShowTextContent('text')}>
          文字版
        </View>
      </View>
    </View>
)}

export default ProcessTitle;
